<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
   
      <table>
        <thead>
          <tr>
            <!-- <th>用户名</th>
            <th>年龄</th>
            <th>毕业学校</th> -->
          </tr>
        </thead>
        <tbody ref='inputs'>
          <tr class="row" v-for="(user,index) in users">
            <td><el-input @keydown.enter.native="test(0,index)"  v-model="user.name" ></el-input></td>
            <td>
              <el-select ref="test" v-model="user.age" @keydown.enter.native="test(1,index)" filterable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td>
             
              <el-input @keydown.enter.native="test(2,index)" v-model="user.school" ></el-input>
            </td>
            <td>
              <el-input @keydown.enter.native="test(3,index)"   v-model="user.sex" ></el-input>
            </td>
            <td>
              <el-input @keydown.enter.native="test(4,index)"   v-model="user.team" ></el-input>
            </td>
            <td><el-button @click="remove(index)">删除</el-button></td>
          </tr>
       
        </tbody>
        
      </table>
             
    </div>

     
 
  </div>
</template>
<style>

</style>

<script>
  export default {
    name: "hello",
    data() {
      return {
 
        options: [{
          value: '22',
          label: '黄金糕'
        }, {
          value: '23',
          label: '双皮奶'
        }, {
          value: '25',
          label: '蚵仔煎'
        }, {
          value: '33',
          label: '龙须面'
        }, {
          value: '44',
          label: '北京烤鸭'
        }],
        user: {
          name: "",
          age: "",
          school: ""
        },
        users: [{
            name: "李磊",
            age: "25",
            school: "洛阳理工",
            sex: 'f',
            team: '1'
          },
          {
            name: "张成",
            age: "23",
            school: "桂林电子科技",
            sex: 'm',
            team: '2'
          },
          {
            name: "炼心",
            age: "22",
            school: "江西电子科技",
            sex: 'f',
            team: '3'
          }
        ]
      };
    },
    methods: {
      insert: function() {
        this.users.push({name:'',age:'',school:'',sex:'',team:''});
      },
      remove: function(index) {
        this.users.splice(index, 1);
      },
      //传入行，列
      test: function(col, row) {

      
        // console.log(col,row)
        let test  = this.$refs.test;
       
        test[row].visible = false;
        //获取指定行
        let rows = this.$refs.inputs.getElementsByClassName("row");
        //获取当前行
        let currow = rows[row];
        // 获取当前行所有列
        let inputs = currow.getElementsByTagName("input");
     
        //列尾
        if (col === 4) {
          //表格尾行尾列
          if (row === this.users.length - 1) {
            //插入空行
            this.insert();
          }
          //转行
          this.$nextTick(function() {
            this.test(-1, row + 1);
          });
        } else {
        
          //获取下一个焦点
          inputs[col + 1].focus();
        }
      },

      // getKeyCode:function(){
      //   document.addEventListener('keydown',function(){
         
      //   switch(event.keyCode){
      //     case 13:console.log(event.key);
      //     break;
      //     case 37:console.log(event.key)
      //     break;
      //     case 38:console.log(event.key)
      //     break;
      //     case 39:console.log(event.key)
      //     break;
      //     case 40:console.log(event.key)
      //     break;
      //     default:
      //     break;
      //   }
      //   },false)
       
      // },
   
    },
  };
</script>


